<template>
    <div class="Pro">
        <div class="Pro_head">
            <el-button type="primary" @click="dialogVisible = true">新增</el-button>
            <el-dialog
            title="新增"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <table border="1px solid #000">
                <tr>
                    <td colspan="2" style="text-align: left;background: #ccc">设置代理商信息</td>
                </tr>
                <tr>
                    <td style="text-align: center;">代理商名称</td>
                    <td style="padding: 5px 0;"><input v-model="mess.name" type="text" name="" id="" style="width:100px;margin-left: 20px;"></td>
                </tr>
                <tr>
                    <td style="text-align: center;">背景色</td>
                    <td style="padding: 5px 0;"><input type="text" name="" id="" style="width:100px;margin-left: 20px;"><select name="" id=""></select></td>
                </tr>
                <tr>
                    <td style="text-align: center;">图标</td>
                    <td style="padding: 5px 0;"><button>上传</button></td>
                </tr>
                <tr>
                    <td style="text-align: center;">背景图</td>
                    <td style="padding: 5px 0;"><button>上传</button></td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align: left;background: #ccc">成为代理商的条件</td>
                </tr>
                <tr>
                    <td style="text-align: center;">直推粉丝</td>
                    <td style="padding: 5px 0;"><input type="text" name="" id="" style="width:100px;margin-left: 20px;"></td>
                </tr>
                <tr>
                    <td style="text-align: center;">非直推粉丝</td>
                    <td style="padding: 5px 0;"><input type="text" name="" id="" style="width:100px;margin-left: 20px;"></td>
                </tr>
                <tr>
                    <td  style="text-align: center;">推粉丝数消费额</td>
                    <td style="padding: 5px 0;"><input type="text" name="" id="" style="width:100px;margin-left: 20px;"></td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align: left;background: #ccc">获得权益</td>
                </tr>
                <tr>
                    <td style="text-align: center;">自购省钱</td>
                    <td style="padding: 5px 0;"><input v-model="mess.shop" type="text" name="" id="" style="width:100px;margin-left: 20px;">%</td>
                </tr>
                <tr>
                    <td style="text-align: center;">一级分佣</td>
                    <td style="padding: 5px 0;"><input v-model="mess.one" type="text" name="" id="" style="width:100px;margin-left: 20px;">%  </td>
                </tr>
                <tr>
                    <td style="text-align: center;">二级分佣</td>
                    <td style="padding: 5px 0;"><input v-model="mess.two" type="text" name="" id="" style="width:100px;margin-left: 20px;">%</td>
                </tr>
                <tr>
                    <td style="text-align: center;">三级分佣</td>
                    <td style="padding: 5px 0;"><input v-model="mess.three" type="text" name="" id="" style="width:100px;margin-left: 20px;">%</td>
                </tr>
                <tr>
                    <td style="text-align: center;width:100px">权益说明</td>
                    <td style="padding: 5px 0;"><textarea v-model="mess.title" name="" id="" cols="30" rows="10" style="width:100px;height:100px;margin-left: 20px; "></textarea></td>
                </tr>
            </table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="ok()">确 定</el-button>
            </span>
            </el-dialog>
        </div>
        <div class="Pro_biao">
            <el-dialog
        title="编辑"
        :visible.sync="dialogVisibles"
        width="30%"
        :before-close="handleClose">
        <table border="1px solid #000">
            <tr >
                <td colspan="2" style="text-align: left;background: #ccc">代理商信息</td>
            </tr>
            <tr>
                <td style="text-align: center;">代理名称</td>
                <td style="padding: 5px 0;"><input type="text" v-model="mess.name" name="" id="" style="width:130px;margin-left: 20px;"></td>
            </tr>
            <tr>
                <td style="text-align: center;">图标</td>
                <td style="padding: 5px 0;"><button>上传</button></td>
            </tr>
            <tr>
                <td style="text-align: center;">背景图</td>
                <td style="padding: 5px 0;"><button>上传</button></td>
            </tr>
            <tr>
                <td></td>
                <td style="padding: 5px 0;"><button>上传</button></td>
            </tr>
            <tr>
                <td style="text-align: center;">一级分佣</td>
                <td style="padding: 5px 0;"><input type="text" v-model="mess.one" name="" id="" style="text-align: center;width:100px;margin-left: 20px;">%</td>
            </tr>
            <tr>
                <td style="text-align: center;">二级分佣</td>
                <td style="padding: 5px 0;"><input type="text" v-model="mess.two" name="" id="" style="text-align: center;width:100px;margin-left: 20px;">%</td>
            </tr>
            <tr>
                <td style="text-align: center;">三级分佣</td>
                <td style="padding: 5px 0;"><input type="text" v-model="mess.three" name="" id="" style="text-align: center;width:100px;margin-left: 20px;">%</td>
            </tr>
            <tr>
                <td style="text-align: center;">权益说明</td>
                <td style="padding: 5px 0;"><textarea name=""  v-model="mess.title" id="" cols="30" rows="10" style="width:100px;height:100px;margin-left: 20px; "></textarea></td>
            </tr>
        </table>
        <button class="Pro_btn" @click="Pro_Tijiao()">提交</button>
        </el-dialog>
        </div>
        <div class="Pro_main">
            <el-table
                id="tabll"
            :data="L_Proxy_Chu"
            border
            style="width: 100% "
            align="center">

            <el-table-column
                prop="ids"
                label="ID"
                width="80"
                align="center">
            </el-table-column>

            <el-table-column
                prop=""
                label="图标"
                width="180"
                align="center">
                <template slot-scope="scope">
                <img
                size="mini"
                :src='scope.row.img'/>
                </template>
            </el-table-column>

            <el-table-column
                prop="name"
                label="名称"
                width=""
                align="center">
            </el-table-column>

            <el-table-column
                prop="shop"
                label="自购比例"
                width=""
                align="center">
                <template slot-scope="scope">
                    {{scope.row.shop}}.00%
                </template>
            </el-table-column>

            <el-table-column
                prop="one"
                label="一级"
                align="center">
                <template slot-scope="scope">
                    {{scope.row.one}}.00%
                </template>
            </el-table-column>
            
            <el-table-column
                prop="two"
                label="二级"
                align="center">
                <template slot-scope="scope">
                    {{scope.row.two}}.00%
                </template>
            </el-table-column>
            
            <el-table-column
                prop="three"
                label="三级"
                align="center">
                <template slot-scope="scope">
                    {{scope.row.three}}.00%
                </template>
            </el-table-column>
            
            <el-table-column
                prop=""
                label="状态"
                align="center">
                <el-switch
                v-model="value"
                active-color="#13ce66"
                inactive-color="#ff4949">
                </el-switch>
            </el-table-column>
            
            <el-table-column
                prop=""
                label="操作"
                align="center">
                <template slot-scope="scope">
                    <p class="Pro_main_p1">
                        <span @click="L_Bian(scope.row)"><i class="el-icon-edit"></i></span>
                        <span @click="L_shan(scope.row.id)"><i class="el-icon-delete"></i></span>
                    </p>
                </template>
                
            </el-table-column>
    </el-table>
        </div>
        <div class="Pro_foot"></div>
    </div>
</template>

<script >
import {mapState} from 'Vuex'
import Mock from 'mockjs'
export default {
    data() {
        return {
            value:true,
            dialogVisible: false,
            dialogVisibles: false,
            mess:{
                ids:'',
                id:'',
                img:'',
                name:'',
                shop:'',
                one:'',
                two:'',
                three:'',
                title:"",
            }
        }
    },
    computed:{
        ...mapState("proxy",["L_Proxy_Chu"])
    },
    created() {
        this.$store.dispatch("proxy/L_Proxy_chu")
    },
    methods: {
        //点击提交
        Pro_Tijiao(){
            this.$store.dispatch("proxy/L_Proxy_jiao",this.mess)
            this.dialogVisibles=false
            this.mess={
                ids:'',
                id:'',
                img:'',
                name:'',
                shop:'',
                one:'',
                two:'',
                three:'',
            }
        },
        //点击编辑
        L_Bian(item){
            Object.assign(this.mess,item)
            this.dialogVisibles=true
        },
        //点击删除
        L_shan(id){
            this.$store.dispatch("proxy/L_Proxy_shan",id)
        },
        //点击确定按钮
        ok(){
            const lis=Mock.mock({
                list:[{
                    ids:/\d{2}/,
                    id:"@id",
                    img:"@image(30x30,@color)",
                }]
            })
            Object.assign(this.mess,lis.list[0])
            if(this.mess.name===''&&this.mess.one===''&&this.mess.two===''&&this.mess.three===''&&this.mess.shop===''){
                alert("输入框不能为空")
            }else{
                this.$store.dispatch("proxy/L_Proxy_ok",this.mess)
            }
            this.dialogVisible=false
            this.mess={
                ids:'',
                id:'',
                img:'',
                name:'',
                shop:'',
                one:'',
                two:'',
                three:'',
            }
        },
        handleClose(done) {
        this.$confirm('确认关闭？')
            .then(_ => {
            done();
            })
            .catch(_ => {});
            this.mess={
                ids:'',
                id:'',
                img:'',
                name:'',
                shop:'',
                one:'',
                two:'',
                three:'',
            }
        }
    }
}
</script>

<style>
.Pro_main{
    margin-top: 20px;
    overflow: scroll;
}
.Pro_main_p1{
    display: flex;
    justify-content: space-around;
}
.Pro_main_p1>span:first-child{
    color: rgb(6, 153, 252);
}
.Pro_main_p1>span:last-child{
    color: rgb(252, 6, 47);
    
}
/* .el-dialog__body{
    width: 300px;
} */
.el-dialog__body>table{
    width: 260px;
    border-collapse: collapse;
}
.el-dialog__body>table>tr>td>button{
    background: rgb(3, 171, 248);
    border: none;
    padding: 2px 25px;
    border-radius: 5px;
    color: #fff;
    margin-left: 30px;
}
.Pro_biao>table{
    border-collapse: collapse;
}
.Pro_btn{
    padding: 10px 40px;
    background: rgb(3, 171, 248);
    border: none;
    color: #fff;
    border-radius: 5px;
    margin-left: 70px;
    margin-top: 30px;
}
</style>